import React, { useState } from 'react'
import { Header, AlertTip, RouterView } from 'src/components'
import { Link } from 'react-router-dom'
import routerData from './routerData'
import './index.scss'

const Points = () => {
    const [showAlert, setShowAlert] = useState(false)
    const [alertText, setAlertText] = useState()
    const usePoint = () => {
        setAlertText('快去下单赚取大量积分吧')
        setShowAlert(true)
    }
    const onClose = () => {
        setShowAlert(false)
    }
    return <div className="page_points">
        <Header title="我的积分" goBack></Header>
        <section className="content_container">
            <section className="content">
                <header className="content_header">
                    <span className="content_title_style">当前积分</span>
                    <section className="contetn_description">
                        <img src="/images/description.png" height="24" width="24" alt="" />
                        <Link to="/points/detail" className="content_title_style">积分说明</Link>
                    </section>
                </header>
                <p className="content_num">
                    <span>0</span>
                    <span>分</span>
                </p>
                <div className="promit_button" onClick={usePoint}>积分兑换商品</div>
            </section>
        </section>
        <p className="deal_detail">最近30天积分纪录</p>
        <div className="no_log">
            <img src="/images/no-log.png" alt="" />
            <p>最近30天无积分纪录</p>
            <p>快去下单赚取大量积分吧</p>
        </div>
        {showAlert && <AlertTip onClose={onClose} alertText={alertText}></AlertTip>}
        <RouterView data={routerData} />
    </div>
}

export default Points